<template>
  <div>
      <p>Receiver</p>
      <p>params: {{ $route.params }}</p>
      <p>query: {{ $route.query }}</p>
      <p>args: {{ args }}</p>
  </div>
</template>

<script>
export default {
  name: 'ReceiverView',
  props: {
    args: {
      type: [ String , Object , Array ],
      required: false
    }
  },
  // 生命周期钩子
  created(){
    let parameters = Object.assign( {} , this.$route.params , this.$route.query );
    console.log( '[created] parameters: ' , parameters );

    // 使用 $watch 函数对 $route.params 进行侦听
    this.$watch( () => this.$route.params , (toParams,previousParams)=>{
      console.log( '[params] old value: ' , JSON.stringify( previousParams ) );
      console.log( '[params] new value: ' , JSON.stringify( toParams ) );
    });

    // 使用 $watch 函数对 $route.query 进行侦听
    this.$watch( () => this.$route.query , (newValue,oldValue)=>{
      console.log( '[query] old value: ' , JSON.stringify( oldValue ) );
      console.log( '[query] new value: ' , JSON.stringify( newValue ) );
    });
  },
  /*
  updated(){
    let parameters = Object.assign( {} , this.$route.params , this.$route.query );
    console.log( '[updated] parameters: ' , parameters );
    console.log( this );
  },
  // 在侦听器中相应路由参数的变化
  watch: {
    // 期望监听路由参数的变化
    '$route.params': function(newValue,oldValue){
      console.log( '[params] old value: ' , JSON.stringify( oldValue ) );
      console.log( '[params] new value: ' , JSON.stringify( newValue ) );
    },
    '$route.query': function(newValue,oldValue){
      console.log( '[query] old value: ' , JSON.stringify( oldValue ) );
      console.log( '[query] new value: ' , JSON.stringify( newValue ) );
    }
  }
  */
}
</script>

<style>

</style>